<template lang="html">
  <div class="">
    <div class="">
      <!--<el-button-->
        <!--type="primary"-->
        <!--@click="timeoffFormDisplay"-->
        <!--class="timeoffButton"-->
        <!--size="small">-->
        <!--请假申请-->
      <!--</el-button>-->
    </div>
    <el-table
      :data="application"
      stripe
      style="width: 100%"
      class="tableDatadisplay">
      <el-table-column
        prop="holidayStart"
        :formatter="formatDate1"
        label="假期开始日期"
        sortable
        align="center">
      </el-table-column>
      <el-table-column
        prop="holidayEnd"
        :formatter="formatDate2"
        label="假期结束日期"
        sortable
        align="center">
      </el-table-column>
      <!--<el-table-column-->
        <!--prop="timeoff_days"-->
        <!--label="请假天数"-->
        <!--align="center">-->
      <!--</el-table-column>-->
      <el-table-column
        prop="type"
        label="请假类型"
        align="center">
      </el-table-column>
      <el-table-column
        label="请假原因"
        prop="reason"
        align="center">
      </el-table-column>
      <el-table-column
        prop="submitTime"
        label="提交日期"
        :formatter="formatDate3"
        sortable
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="140">
        <template slot-scope="scope">
          <el-button-group>
            <!--<el-button-->
            <!--icon="el-icon-delete"-->
            <!--size="small"-->
            <!--@click="deleteTableItem(scope.row)">-->
            <!--</el-button>-->
            <!--<el-button-->
            <!--icon="el-icon-more"-->
            <!--size="small"-->
            <!--@click="displayVocationInfo(scope.row)">-->
            <!--</el-button>-->
            <el-button icon="el-icon-edit" size="small"  @click="timeoffFormDisplay(scope.$index, scope.row)"></el-button>
            <el-button  icon="el-icon-delete" size="small"   @click="deleteTableItem(scope.$index, scope.row)"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="10"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total=application.length>
    </el-pagination>

    <el-dialog
      title="请假修改单"
      :visible.sync="dialogFormVisible"
      :before-close="handleDialogClose">
      <el-form
        :model="timeoffForm"
        label-position="right"
        label-width="140px">
        <el-form-item
          label="请假起止日期">
          <!--<el-date-picker-->
          <!--v-model="timeoffForm.timeoff_date"-->
          <!--type="daterange"-->
          <!--range-separator="~"-->
          <!--format="yyyy 年 MM 月 dd 日"-->
          <!--value-format="yyyy-MM-dd"-->
          <!--start-placeholder="开始日期"-->
          <!--end-placeholder="结束日期"-->
          <!--size="small">-->
          <el-date-picker
            v-model="timeoffForm.timeoff_date"
            type="datetimerange"
            align="right"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['09:00:00', '17:00:00']">
          </el-date-picker>
          <!--</el-date-picker>-->
        </el-form-item>
        <!--<el-form-item-->
        <!--label="请假天数">-->
        <!--<el-input-number-->
        <!--v-model="timeoffForm.timeoff_day"-->
        <!--class="timeoffType"-->
        <!--:min="1"-->
        <!--size="small"-->
        <!--:disabled="true">-->
        <!--</el-input-number>-->
        <!--</el-form-item>-->
        <el-form-item
          label="请假类型">
          <el-select
            v-model="timeoffForm.timeoff_type"
            placeholder="请选择请假类型"
            class="timeoffType"
            size="small">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="请假原因">
          <el-input
            class="timeoffDecs"
            type="textarea"
            :rows="5"
            v-model="timeoffForm.decs"
            size="small">
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button
          @click="handleDialogClose"
          size="small">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="submitForm"
          size="small">
          确 定
        </el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    mounted: function () {
      var storage=window.localStorage;
      this.id=storage.getItem("user_id");
      this.refresh()
    },
    data() {
      return {
        applicationId:null,
        id:null,
        application:[],
        rewrite:[],
        change:{},
        //当前页
        currentPage: 1,
        //dialog的显示
        dialogFormVisible: false,
        //表单初始化
        timeoffForm: {
          timeoff_date: [],
          timeoff_day: 1,
          timeoff_type: '',
          expect_date: [],
          decs: ''
        },
        //选择器
        options: [{
          value: '事假',
          label: '事假'
        }, {
          value: '病假',
          label: '病假'
        }, {
          value: '婚假',
          label: '婚假'
        }, {
          value: '年假',
          label: '年假'
        }, {
          value: '产假',
          label: '产假'
        }, {
          value: '丧假',
          label: '丧假'
        }, {
          value: '陪产假',
          label: '陪产假'
        }],
        //表格数据

      }
    },
    methods: {
      formatDate1(row){
        return this.$moment(row.holidayStart).format('YYYY-MM-DD HH:mm:ss');
      },
      formatDate2(row){
        return this.$moment(row.holidayEnd).format('YYYY-MM-DD HH:mm:ss');
      },
      formatDate3(row){
        return this.$moment(row.submitTime).format('YYYY-MM-DD HH:mm:ss');
      },
      refresh(){
        this.$http.get('api/leavingsystem/application/staff/' + this.id, {headers:{"Authorization": "1000.123456.1"}}).then(response =>{
          // console.log("good");
          this.application=response.data.data;
          this.application= this.application.filter(ap => ap.status == 0);
          // console.log(this.application)
          // console.log(response.data.data.password);
          // console.log(this.ruleForm2.checkPass);
          // this.checkstaff.password="123456";
// console.log(response.json());
        }, response =>{
          // alert("wrong");
          console.log("wrong");
          // console.log(response.data);
          this.$alert('系统繁忙，请刷新重试', '加载失败', {
            confirmButtonText: '确定',
            // callback: action => {
            //   this.$message({
            //     type: 'info',
            //     message: `action: ${ action }`
            //   });
            // }
          });

        });
      },
      //删除表格数据
      deleteTableItem (index, row) {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$http.delete('api/leavingsystem/application/'+row.applicationId, {headers:{"Authorization": "1000.123456.1"}}).then(response =>{
              if(response.data.error_code==0){
                this.$notify({
                  title: '成功',
                  message: '删除成功!',
                  type: 'success'
                });
              }else{
                this.$notify({
                  title: '失败',
                  message: '删除失败!',
                  type: 'error'
                });
              }
              console.log("good");
              console.log(response.data);
              this.refresh()
              // window.location.reload();
            },response=>{
              this.$notify({
                title: '失败',
                message: '删除失败，请重试',
                type: 'error'
              });
              console.log("wrong");
            })


        }).catch(() => {

        });
      },
      //处理页面跳转请求
      handleCurrentChange(item) {
        console.log(item);
      },
      //处理每页的个数发生变化
      handleSizeChange(item) {
        console.log(item);
      },
      //打开请假申请单
      timeoffFormDisplay(index,row) {
        this.applicationId=row.applicationId;
        this.dialogFormVisible = true;
      },
      //当对话框关闭时，初始化数据
      handleDialogClose() {
        this.timeoffForm = {
          timeoff_date: [],
          timeoff_day: 1,
          timeoff_type: '',
          expect_date: [],
          decs: ''
        };
        this.dialogFormVisible = false;
      },
      //提交请假申请单
      submitForm() {
        if(this.timeoffForm.timeoff_date==null || this.timeoffForm.timeoff_type==null){
          this.$alert('请填写必要信息', '提交失败', {
            confirmButtonText: '确定',
          });
        }else{
          console.log(this.timeoffForm.timeoff_date);
           this.change.holidayStart=this.timeoffForm.timeoff_date[0];
           this.change.holidayEnd=this.timeoffForm.timeoff_date[1];
           this.change.type=this.timeoffForm.timeoff_type;
           this.change.reason=this.timeoffForm.decs;
            this.$http.put('api/leavingsystem/application/'+this.applicationId, this.change, {headers:{"Authorization": "1000.123456.1"}, emulateJSON: true}).then(response =>{
              if(response.data.error_code==0){
                this.$notify({
                  title: '成功',
                  message: '修改成功!',
                  type: 'success'
                });
              }else{
                this.$notify({
                  title: '失败',
                  message: '修改失败!',
                  type: 'error'
                });
              }
              console.log("good");
              console.log(response.data);
              this.refresh()
            },response=>{
              this.$notify({
                title: '失败',
                message: '提交失败!',
                type: 'error'
              });
              console.log("wrong");
              console.log(response.data);
            });

          console.log(this.timeoffForm.timeoff_date);
          console.log("提交请假申请单");
          this.handleDialogClose();

        }


      }
    }
  }
</script>

<style lang="css">
  .timeoffButton {
    float: right;
  }
  .tableDatadisplay {
    margin-bottom: 40px;
  }
  .timeoffDecs {
    width: 350px;
  }
  .timeoffType {
    width: 220px;
  }
</style>
